<template>
  <div class="tab-control">
    <div class="tab-control-flex">
      <div class="tab-control-div" v-for="(item,index) in tabControlList" @click="itemClick(index)">
        <span :class="{active: index===controlIndex}">{{item}}</span>
      </div>
    </div>
    <HomeGoodLists :goodsLists="goods[select].list"></HomeGoodLists>
  </div>
</template>

<script>
import HomeGoodLists from "views/home/homegoodlists/HomeGoodLists";
import {getGoods,getGoodsPopular,getGoodsSelected} from "network/home";
export default {
  name: "TabControl",
  props: {
    tabControlList: {
      type: Array,
      default(){
        return [];
      }
    }
  },
  components: {
    HomeGoodLists
  },
  data(){
    return {
      controlIndex: 0,
      goods: {
        "recommend": {list: []},
        "popular": {list: []},
        "selected": {list: []}
      },
      select: "recommend"
    }
  },
  methods: {
    itemClick(index){
      this.controlIndex = index;
      if(index==0){
        this.select = "recommend"
      }else if (index==1){
        this.select = "popular"
      }
      else{
        this.select = "selected"
      }
    }
  },
  created() {
    //请求首页推荐商品
    getGoods().then(res => {
      this.goods.recommend.list= res.data.data.list;
      // console.log(res.data.data.list);
    }).catch(err => {
      console.log(err);
    });
    //请求首页流行商品
    getGoodsPopular().then(res => {
      // console.log(res.data);
      this.goods.popular.list = res.data.data.list;
    }).catch(err => {
      console.log(err);
    });

    //请求首页精选商品
    getGoodsSelected().then(res => {
      // console.log(res.data.data.list);
      this.goods.selected.list = res.data.data.list;
    }).catch(err => {
      console.log(err);
    });
  }

}
</script>

<style scoped>
  .tab-control{
    width: 100%;
    text-align: center;
  }
  .tab-control-flex{
    position: sticky;
    top: 70px;
  }
  .tab-control-div{
    display: inline-block;
    background-color: aquamarine;
    float: left;
    width: 33.333%;
    height: 40px;
    /*line-height: 40px;*/
    margin-top: 10px;
  }
  .tab-control-div span{
    display: inline-block;
    margin-top: 2px;
    padding: 5px;
  }
  .active{
    border-bottom: 3px red solid;
    color: red;
  }
</style>
